<link rel="stylesheet" type="text/css" href="/assets/third-party/datatables/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="/assets/third-party/select2-3.5.1/select2.css">

<style type="text/css">
	.il{
		display: inline;
	}
	.form-group .control-label{
		padding-right: 5px;
	}
	.form-group .col-sm-7{
		padding-left: 5px;
	}
	.form-group input, .form-group select{
		width: 92%;
		display: inline;
	}
</style>

<div class="container" style="margin-top: 60px;">
	<div class="row">
		<div class="col-lg-12">
			<!--<a href="#" class="btn btn-info"> <i class="fa fa-search"></i> 查询 </a> -->
			<a href="#" role="add" class="btn btn-success" data-toggle="modal" data-target="#teacherModal"> <i class="fa fa-plus"></i> 新增教师 </a>
			<!--<a href="#" class="btn btn-success"> <i class="fa fa-plus"></i> 全选 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 批量删除 </a>
			<a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 刷新 </a>-->
		</div>
	</div>
	<div class="row" style="margin-top: 10px;">
		<div class="col-lg-12">
			<div class="panel panel-default">
                <div class="panel-heading">
                    教师列表
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>ID</th>
								<th>照片</th>
								<th>姓名</th>
								<th>性别</th>
								<th>手机</th>
								<th>邮箱</th>
								<th style="width: 300px;">教授课程</th>
								<th>创建时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="teacherList">
							<?php foreach ($items as $key => $value) { ?>
							<tr data-id="<?php echo $value->id; ?>">
								<td><?php echo $value->id; ?></td>
								<td><img src="<?php echo $value->people->photo; ?>" alt="<?php echo $value->people->first_name; ?>老师的照片" style="width: 60px";/></td>
								<td><?php echo $value->people->first_name; ?>老师</td>
								<td><?php echo $value->people->gender; ?></td>
								<td><?php echo $value->people->phone; ?></td>
								<td><?php echo $value->people->email; ?></td>
								<td>
									<?php 
									foreach ($value->courses as $course) {
										if( ! $course->course){
											continue;
										}
										echo $course->course->name . ',';
									}; 
									?>
								</td>
								<td><?php echo date('Y-m-d H:i:s', $value->created_at); ?></td>
								<td>
									<a href="#" class="btn btn-sm btn-info" role="edit" data-toggle="modal" data-target="#teacherModal"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
									<a href="#" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmModal"> <i class="fa fa-trash-o"></i> 删除 </a>
								</td>
							</tr>
							<?php } ?>							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>

<!-- 教师详情模态框 -->
<div class="modal fade" id="teacherModal" tabindex="-1" role="dialog" aria-labelledby="teacherModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
				<h4 class="modal-title" id="teacherModalTitle"> 教师详情 </h4>
			</div>
			<div class="modal-body">
				<form id="frmTeacher" role="form" action="" method="post">
					<div class="form-group">
						<label for="name">姓名</label>
						<input type="text" class="form-control" id="first_name" name="first_name" placeholder="姓" style="width: 46%; display: inline;">
						<input type="text" class="form-control" id="last_name" name="last_name" placeholder="名" style="width: 46%; display: inline;">
					</div>
					<div class="form-group">
						<label for="gender">性别</label>
						<select id="gender" name="gender" class="form-control">
							<option value="">保密</option>
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
					<div class="form-group">
						<label for="btnUpload">照片</label>
						<img src="" id="viewThumbnail" alt="" style="width: 80px;"/>
						<input type="hidden" id="thumbnail" name="photo" />
						<a id="btnUpload" class="btn btn-info" data-panel='thumbnail' data-toggle="modal" data-target="#modal-upload">上传</a>
					</div>
					<div class="form-group">
						<label for="url">链接</label>
						<input type="text" class="form-control" id="url" name="url" placeholder="风采链接">
					</div>
					<div class="form-group">
						<label for="phone">手机</label>
						<input type="text" class="form-control" id="phone" name="phone" placeholder="手机号码">
					</div>
					<div class="form-group">
						<label for="email">邮箱</label>
						<input type="email" class="form-control" id="email" name="email" placeholder="邮箱地址">
					</div>
					<div class="form-group">
						<label for="name">授课</label>
						<select id="courses" name="courselist[]" multiple="multiple" style="width: 92%;">
							<option></option>
						</select>
					</div>
					<div class="form-group">
						<label for="summary">简介</label>
						<textarea class="form-control" id="summary" name="summary" placeholder="简介">
						</textarea>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnSave" class="btn btn-primary"> 保存 </button>
			</div>
		</div>
	</div>
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="alert alert-warning">
					<strong>确定删除？</strong>
					<p>删除该教师，与该老师相关的数据将全部被清空!</p>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
				<button type="button" id="btnConfirm" class="btn btn-danger"> 确定 </button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript" src="/assets/third-party/select2-3.5.1/select2.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		$("#courses").select2({placeholder: "请选择教授课程"});

		$.get('/admin/course', 
			function(data, status){
				if(data.status == 'succ'){
					var courses = data.data;
					var grades = data.grades;
					for (var i = 0; i < grades.length; i++) {
						var str = '';
						for (var j = 0; j < courses.length; j++) {
							if(courses[j].grade_id == grades[i].id){
								str += "<option value='" + courses[j].id + "'>" + courses[j].name + "(" + courses[j].term.name + ")" + "</option>";
							}
						}
						$('#courses').append("<optgroup label='" + grades[i].name + "'>" + str + "</optgroup>");
					}
				}

			}, 'json');
	});
</script>

<script type="text/javascript" src="/assets/third-party/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/assets/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">

	var flag = false;
	
	$(function(){

		$('.table').dataTable({
	        "oLanguage": {
	            "sLengthMenu": "每页显示 _MENU_ 条记录",
	            "sZeroRecords": "很抱歉，未找到相关数据",
	            "sInfo": "从 _START_ 至 _END_ /共 _TOTAL_ 条数据",
	            "sInfoEmpty": "没有符合条件的数据",
	            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
	            "sSearch": "搜索：",
	            "oPaginate": {  
					"sFirst": "首页",  
					"sPrevious": "上一页",
					"sNext": "下一页",
					"sLast": "末页"
				}  
	        },
	        fnDrawCallback: function(){

	            if(window.flag == false){
	        		window.flag = true;
	        		var index = localStorage.getItem('pagination_index');
	                localStorage.removeItem('pagination_index');
		        	if( ! index){
		        		index = 1;
		        	}
		        	index -= 1;

		        	$('.table').dataTable().fnPageChange(index);
	                
	        	}
            }
	    });

		$('table').delegate('a[data-target="#confirmModal"]', 'click', function(){
	    	$('#btnConfirm').attr('data-id', $(this).parent().parent().attr('data-id'));
	    });

	    $('#btnConfirm').click(function(){
	    	var id = $(this).attr('data-id');
	    	$.get('/admin/teacher/delete/' + id,
	    		function(data, status){
	    			if(data.status == 'succ'){
	    				$('#teacherList').find('tr[data-id="' + id + '"]').remove();
	    				$('#confirmModal').modal('hide');
	    			}
	    		}, 'json');
	    });

	    $('#grade').change(function(){
	    	$('input[type="search"]').val($(this).val()).keyup();
	    });

	    $(document).delegate('a[data-target="#teacherModal"]', 'click', function(){

	    	$('#first_name').val('');
	    	$('#last_name').val('');
	    	$('#gender').val('');
	    	$('#phone').val('');
	    	$('#email').val('');
	    	$('#summary').val('');
	    	$('#url').val('');
	    	$('#courses').select2("val", "");
	    	$('#thumbnail').val('');
	    	document.getElementById("viewThumbnail").src = '';

	    	if($(this).attr('role') == 'edit'){
	    		localStorage.setItem('pagination_index', $('.pagination .active').find('a').text());
	    		$('#frmTeacher').attr('action', '/admin/teacher/edit/' + $(this).parent().parent().attr('data-id'));
	    		$.get('/admin/teacher/view/' + $(this).parent().parent().attr('data-id'), 
	    			function(data, status){
	    				if(data.status == 'succ'){
	    					var item = data.data;
	    					$('#first_name').val(item.people.first_name);
	    					$('#last_name').val(item.people.last_name);
	    					$('#gender').val(item.people.gender);
	    					$('#phone').val(item.people.phone);
	    					$('#email').val(item.people.email);
	    					$('#summary').val(item.summary);
	    					$('#url').val(item.url);
	    					$('#thumbnail').val(item.people.photo);
	    					document.getElementById("viewThumbnail").src = item.people.photo;
	    					var values = new Array();
	    					for (var i = 0; i < item.courses.length; i++) {
	    						values[i] = item.courses[i].id;
	    					}
	    					$('#courses').select2('val', values);
	    					//$('#courses').attr('data-value', values);
	    				}
	    			}, 'json');
	    	}else{
	    		$('#frmTeacher').attr('action', '/admin/teacher/create/');
	    	}
	    });

		$('#btnSave').click(function(){
			$('#frmTeacher').submit();
		});

	});
</script>

<?php echo render('edu/public/upload'); ?>
<script type="text/javascript">
    var path = 'images';
    var imgpanel = '';


    function callback(file, data){
        var json = eval('(' + data + ')');
        if(json.status == 'succ'){
            $("#thumbnail").val(json.data);
            document.getElementById("viewThumbnail").src=json.data;
        }else{
            alert(json.msg);
        }
    }
</script>